<template>
	<Pannel navbar>
		<view class="zbhd-box">
			<image class="bg" :src="bgImg"></image>

			<view class="card-list-1">
				<CardBox class="card-item" width="332rpx" height="160rpx" :img="cardImg1">
					<view class="card-inner-box">
						<view class="num">26</view>
						<view class="text">活动人数</view>
					</view>
				</CardBox>
				<CardBox class="card-item" width="332rpx" height="160rpx" :img="cardImg2">
					<view class="card-inner-box">
						<view class="num">26</view>
						<view class="text">参与活动人次</view>
					</view>
				</CardBox>
			</view>

			<view class="card-list-2">
				<view class="card-item">
					<CardBox width="686rpx" height="222rpx">
						<view class="header">
							<view class="title">1月</view>
							<view class="more" @click="onJump('/pages-zbhd/zbhd/detail')">
								<view class="icon iconfont icon-jiantou"></view>
							</view>
						</view>
						<view class="bodyer">
							<view class="msg">
								<view class="text">活动总数</view>
								<view class="num">10</view>
							</view>
							<view class="msg">
								<view class="text">参与活动人数</view>
								<view class="num">10</view>
							</view>
						</view>
					</CardBox>
				</view>

				<view class="card-item">
					<CardBox width="686rpx" height="222rpx">
						<view class="header">
							<view class="title">1月</view>
							<view class="more">
								<view class="icon iconfont icon-jiantou"></view>
							</view>
						</view>
						<view class="bodyer">
							<view class="msg">
								<view class="text">活动总数</view>
								<view class="num">10</view>
							</view>
							<view class="msg">
								<view class="text">参与活动人数</view>
								<view class="num">10</view>
							</view>
						</view>
					</CardBox>
				</view>

				<view class="card-item">
					<CardBox width="686rpx" height="222rpx">
						<view class="header">
							<view class="title">1月</view>
							<view class="more">
								<view class="icon iconfont icon-jiantou"></view>
							</view>
						</view>
						<view class="bodyer">
							<view class="msg">
								<view class="text">活动总数</view>
								<view class="num">10</view>
							</view>
							<view class="msg">
								<view class="text">参与活动人数</view>
								<view class="num">10</view>
							</view>
						</view>
					</CardBox>
				</view>

				<view class="card-item">
					<CardBox width="686rpx" height="222rpx">
						<view class="header">
							<view class="title">1月</view>
							<view class="more">
								<view class="icon iconfont icon-jiantou"></view>
							</view>
						</view>
						<view class="bodyer">
							<view class="msg">
								<view class="text">活动总数</view>
								<view class="num">10</view>
							</view>
							<view class="msg">
								<view class="text">参与活动人数</view>
								<view class="num">10</view>
							</view>
						</view>
					</CardBox>
				</view>
			</view>
		</view>
	</Pannel>


</template>

<script>
import Pannel from '../../components/Pannel/Pannel.vue';
import CardBox from '../../components/CardBox/CardBox.vue'
import bg from '@/utils/base64/zbhd/bg.js';
import card1 from '@/utils/base64/zbhd/card_1.js';
import card2 from '@/utils/base64/zbhd/card_2.js';

export default {
	name: 'zbhd',
	components: {
		Pannel,
		CardBox
	},
	data() {
		return {
		}
	},
	computed: {
		bgImg() {
			return bg;
		},
		cardImg1() {
			return card1;
		},
		cardImg2() {
			return card2;
		},
		navBackStyle() {
			return {
				top: this.top,
				width: this.height,
				height: this.height
			}
		}
	},
	methods: {
		onJump(path = '') {
			this.$common.navigateTo(path);
		}
	},
}
</script>

<style lang="scss" scoped>
.zbhd-box {
	position: relative;
	background-size: 100%;
	background-repeat: no-repeat;
	width: 100vw;
	padding: 0 32rpx 0;
	box-sizing: border-box;
	overflow: hidden;

	.bg {
		position: absolute;
		left: 0;
		top: 0;
		width: 100vw;
		height: 360rpx;
		z-index: 0;
	}

	.card-list-1 {
		margin-top: 360rpx;
		display: flex;
		justify-content: space-between;

		.card-inner-box {
			width: 100%;
			height: 100%;

			.num {
				font-size: 22px;
				color: #333333;
			}

			.text {
				font-size: 13px;
				color: #666666;
			}
		}
	}

	.card-list-2 {
		margin-top: 24rpx;

		.card-item {
			margin-bottom: 20rpx;

			.header {
				display: flex;
				justify-content: space-between;

				.title {
					font-size: 14px;
					font-weight: 600;
				}

				.more {
					display: flex;
					justify-content: center;
					align-items: center;
					width: 40rpx;
					height: 40rpx;
					background: #faf2e0;
					border-radius: 50%;

					.icon {
						font-size: 24rpx;
						font-weight: bold;
						color: #d39f59;
					}
				}
			}

			.bodyer {

				.msg {
					display: flex;
					justify-content: space-between;
					margin-top: 20rpx;
				}
			}
		}
	}

}
</style>